<template>
  <div class="courts-select">
    <!-- 模糊搜索 -->
    <el-select
      v-model="filterValue"
      v-loadmore="loadMore"
      @visible-change="getPersonOptions"
      clearable
      filterable
      reserve-keyword
      remote
      :placeholder="placeholder"
      :remote-method="remoteQueryEntity"
      :no-data-text="noMatchText"
      @change="filterChange"
      :loading="loading"
    >
        <el-option
          v-for="dict in partyIdOptions"
          :key="dict.partyId"
          :label="dict.name"
          :value="dict.partyId"
        />
    </el-select>
  </div>
</template>

<script>
  import { getPersonDict} from "@/api/ehr/vacation_record";

  export default {
    name: "",
    data() {
      return {
        partyIdOptions: [],
        filterValue: "",
        loading: false,
        noMatchText: "暂无数据",
        pageSearch:1,
      };
    },
    props: {
      list: Array,
      placeholder: {
        type: String,
        default: "请输入xxx"
      }
    },
    methods: {
      //获取申请人信息
      getPersonOptions () {
        var query = {
          pageNum: 1,
          pageSize: 8,
        }
        getPersonDict(query).then((res) => {
          if (res && res.data) {
            this.partyIdOptions = res.data;
          }
        });
      },
      // 下拉加载企业列表
      // 下拉加载人员列表
      loadMore () {
        this.pageSearch++;
        var query = {
          pageNum: this.pageSearch,
          pageSize: 8,
          name: this.serachValue,
        };
        getPersonDict(query).then((res) => {
          if (res && res.data) {
            res.data.map((item) => {
              this.partyIdOptions.push(item);
            });
          }
        });
      },
      // 远程搜索人员列表
      remoteQueryEntity(inputValue) {
        if (inputValue !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = true; // 开始拿数据喽
            this.pageSearch = 1;
            this.serachValue = inputValue;
            var query = {
              pageNum: 1,
              pageSize: 8,
              name: inputValue,
            };
            // 这里模拟发请求，res就当成发请求返回来的数据吧。
            getPersonDict(query).then((response) => {
              this.partyIdOptions = response.data;
            });
            this.loading = false;
          }, 200);
        } else {
          this.partyIdOptions = [];
        }
      },
      // 树的模糊查询选择
      filterChange(e) {
        this.$emit("getSelectedCourt", e);
        this.filterValue = e;
        this.partyIdOptions = [];
      }
    }
  };
</script>

